<template>
  <div class="tp" v-loading="state.loading">
    <Header/>

    <Content>
      <div class="card" style="padding: 24px; margin-top: 12px;">
        <div>
          <a-flex gap="middle" align="center">
            <div>
              <a-date-picker v-model:value="state.workDate"
                             :disabled-date="(value)=>dayjs(value).isAfter(dayjs(),'day')"/>
            </div>
            <div>
              <a-button type="primary" @click="loadData">查询</a-button>
            </div>
          </a-flex>
        </div>

        <div
            style="margin-top: 16px;">
          <a-empty v-if="dataSourceRef.length<1"/>
          <template v-else>
            <a-row v-for="item in dataSourceRef" :key="item.id" align="middle">
              <a-col :span="23">
                <div
                    style="box-shadow: 0 1px 6px 0 rgba(229,197,197,0.5);border-radius: 4px;border: 1px solid #FFDFE7;background-color: #fff;padding: 12px 16px;">
                  <a-flex gap="small" align="center">
                    <div style="width: 4px;height: 15px;background: #F2A8BA;border-radius: 4px;"/>
                    <div style="font-weight: 500;font-size: 14px;color: #333333;">客户信息</div>
                  </a-flex>
                  <div style="font-weight: 400;font-size: 14px;color: #333333;margin: 12px 0;">
                    {{ item.memberName }}&nbsp;&nbsp;{{ item.memberMobile }}
                  </div>

                  <a-flex gap="middle" wrap="wrap">
                    <a-flex align="center"
                            style="width: 32%;background: rgba(255,223,231,0.19);border-radius: 4px;padding: 10px 16px;"
                            v-for="ci in item.pendingData.shopCart" :key="ci.id" gap="small">
                      <div class="fill">
                        <TypographyText :ellipsis="{rows:1}">{{ ci.title }}</TypographyText>
                      </div>
                      <div>x{{ ci.qty }}</div>
                    </a-flex>
                  </a-flex>

                  <div style="border-top: 1px solid #F7E4E9;padding-top: 12px;margin-top: 16px;">
                    <a-flex align="center" justify="space-between">
                      <div>
                        <span>操作人&nbsp;&nbsp;</span><span>{{
                          item.cashierName
                        }}&nbsp;&nbsp;</span><span>{{ item.updateTime || item.createTime }}</span>
                      </div>
                      <div>
                        <a-button danger @click="toOrderDetail(item)">查看</a-button>
                      </div>
                    </a-flex>
                  </div>
                </div>

              </a-col>

              <a-col :span="1">
                <a-popconfirm title="您确定要删除吗?" ok-text="确定" cancel-text="取消" @confirm="onDelete(item)">
                  <div class="delete whitespace-nowrap">
                    <div class="icon">
                      <DeleteOutlined/>
                    </div>
                    <div class="label">删除</div>
                  </div>
                </a-popconfirm>

              </a-col>
            </a-row>
          </template>
        </div>

      </div>
    </Content>

  </div>
</template>

<script setup>
import {defineOptions, onMounted, reactive, ref} from 'vue';
import {useMessage} from '@/hooks/web/useMessage';

import Header from '@/widget/header.vue';
import Content from '@/widget/content.vue';
import {useRoute, useRouter} from 'vue-router';
import {DELETE, PAGE} from "@/api/http.js";
import dayjs from "dayjs";
import {DeleteOutlined} from "@ant-design/icons-vue";
import {TypographyText} from "ant-design-vue";
import {emptyPendingData} from "@/views/cashier/cart.js";

defineOptions({name: 'CashierTakeOrder'});

const {createMessage} = useMessage();

const route = useRoute(), router = useRouter();
const state = reactive({workDate: dayjs()});
const dataSourceRef = ref([]);

onMounted(() => {
  loadData();
});

async function loadData() {
  const {workDate} = state;

  let {list} = await PAGE('/cashier/getPendingOrder')({
    workDate: dayjs(workDate).format('YYYY-MM-DD'),
    currentPage: 1, pageSize: 999999
  }) ?? {};

  list ||= [];
  list.forEach(o => {
    o.pendingData = JSON.parse(o.pendingData || emptyPendingData);
  });

  dataSourceRef.value = list;
}

async function onDelete({id}) {
  await DELETE('/cashier/delPendingOrder', {id});
  await loadData();
}

const toOrderDetail = (item) => {
  const pendingData = item.pendingData;
  if(pendingData.isUpgrade){
    router.replace(`/member/list/card-upgrade?memberCode=${pendingData.memberCode}&cardNo=${pendingData.cardNo}&takeId=${item.id}`)
  }else{
    router.replace(`/cashier/index?takeId=${item.id}&workDate=${item.workDate||''}&memberCode=${item.memberCode}`)
  }
}

</script>

<style lang="less" scoped>
.delete {
  padding-left: 24px;
  color: #EB6485;

  .icon {
    font-size: 26px;
  }

  .label {
    margin-top: 2px;
    font-size: 12px;
  }
}
</style>
